<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>书籍列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/m.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<style>
    img{
        width: 150px;
        height: 150px;
    }
</style>
<div class="container">

    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1>
                    <small>书籍列表 —— 显示所有书籍</small>
                </h1>
            </div>
        </div>
    </div>
    <%--这里执行的是一个增加数据的操作--%>
    <div class="row">
        <div class="col-md-5 column">
            <a class="btn btn-primary" href="${pageContext.request.contextPath}/product/add">新增</a>
            <a class="btn btn-primary" href="${pageContext.request.contextPath}/order/allOrder">查看订单</a>
            <a class="btn btn-primary" href="${pageContext.request.contextPath}/manage/allManage">查看员工</a>
            <a class="btn btn-primary" href="${pageContext.request.contextPath}/supplier/allSupplier">查看供货商</a>
            <a class="btn" href="${pageContext.request.contextPath}/jsp/display.jsp">查看E-R图</a>
        </div>
    </div>

    <div class="row clearfix">
        <div class="col-md-12 column">
            <table class="table table-hover table-striped">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>名字</th>
                    <th>价格</th>
                    <th>图片</th>
                    <th>库存</th>
                    <th>更新时间</th>
                    <th>内容</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <%--在这里将Books表中的值取出来并且展示导前端--%>
                <c:forEach var="product" items="${pageInfo.list}" varStatus="itemStatus">
                    <c:if test="${itemStatus.index mod 1==0}">
                        <tr class="a">
                    </c:if>
                    <c:if test="${itemStatus.index mod 2==0}">
                        <tr class="b">
                    </c:if>
                    <c:if test="${itemStatus.index mod 3==0}">
                        <tr class="c">
                    </c:if>
                    <c:if test="${itemStatus.index mod 4==0}">
                        <tr class="d">
                    </c:if>
                    <td>${product.getPid()}</td>
                    <td>${product.getPname()}</td>
                    <td>${product.getPrice()}</td>
                    <th>
                            <img id="images" alt="" src="/images/${product.photo }">
                    </th>
                    <td>${product.getInventory()}</td>
                    <td>${product.getUpdateTime()}</td>
                    <td>${product.getDetail()}</td>
                    <td>
                        <a href="${pageContext.request.contextPath}/product/toUpdateBook?id=${product.getPid()}">更改</a>
                        |
                        <a href="${pageContext.request.contextPath}/product/toDeleteBook?id=${product.getPid()}">删除</a>
                    </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="box-a">
    <div>
        <div class="col-md-7" align="right">
            当前第[${pageInfo.pageNum}]页，共[${pageInfo.pages}]页，共[${pageInfo.total}]条记录
        </div>
    </div>
    <!-- 分页导航条 -->

    <ul class="pagination">
        <li><a href="allBook?pageNo=${pageInfo.navigateFirstPage}" aria-label="Previous">首页</a></li>
        <li><a href="allBook?pageNo=${pageInfo.pageNum-1}">上一页</a></li>
        <c:forEach begin="1" end="${pageInfo.pages}" var="pageNumber">
            <li><a href="allBook?pageNo=${pageNumber}&size=5">${pageNumber}</a>
            </li>
        </c:forEach>
        <li><a href="allBook?pageNo=${pageInfo.pageNum+1}">下一页</a></li>
        <li><a href="allBook?pageNo=${pageInfo.navigateLastPage}" aria-label="Next">尾页</a></li>
    </ul>
</div>
</body>
</html>